<!--
 * @Description: 邀请好友规则预览弹窗
 * @Author: Li Yujie
 * @Date: 2021/07/21
 * @Last Modified by: Li Yujie
 * @Last Modified time: 2021/07/21
-->
<template>
    <section class="wrapper">
        <el-dialog
            :visible.sync="dialogVisible"
            :show-close="false"
            width="375px"
        >
            <div
                class="close-btn"
                @click="dialogVisible = false"
            >
                <i class="el-icon-circle-close"/>
            </div>
            <div class="dialog-content">
                <page-header
                    title="活动规则"
                    style="flex-shrink: 0"
                />
                <div class="content-wrapper">
                    <div
                        v-for="(item,index) in previewData"
                        :key="index"
                        class="rules-type-item"
                    >
                        <!--标题-->
                        <div
                            class="rules-title"
                            v-if="item.type === 1"
                        >
                            {{ item.content }}
                        </div>
                        <!--正文-->
                        <div
                            class="rules-content"
                            v-if="item.type === 2"
                        >
                            {{ item.content }}
                        </div>
                        <!--图片-->
                        <div
                            class="rules-image"
                            v-if="item.type === 3"
                        >
                            <img
                                :src="item.content"
                                alt=""
                            >
                        </div>
                    </div>
                </div>
            </div>
        </el-dialog>
    </section>
</template>

<script>
import PageHeader from "@/components/invite-friends/page-header";

export default {
    name: 'InviteRulesPreview',
    data() {
        return {
            dialogVisible: false,
            previewData: [],
        };
    },
    components: {PageHeader},
    mounted() {},
    methods: {

        /**
         * 展示弹窗
         * @param data
         */
        show(data) {
            this.dialogVisible = true;
            this.previewData = data;
        },
    }
};
</script>

<style scoped lang="less">
.wrapper {
    /deep/ .el-dialog {
        width: 375px;
        height: 667px;
        background: #F5F6F8;
        box-shadow: 0 0 20px 0 rgba(153, 169, 192, 0.2);
        position: relative;

        .close-btn {
            position: absolute;
            right: -20px;
            top: -20px;
            cursor: pointer;
            font-size: 20px;
            color: #fff;
        }

        .el-dialog__header {
            display: none;
        }

        .el-dialog__body {
            width: 100%;
            height: 100%;
            overflow-y: auto;
            padding: 0;
            &::-webkit-scrollbar {
                width: 0;
                height: 0;
            }
            .dialog-content {
                height: 100%;
                display: flex;
                flex-direction: column;
                .content-wrapper {
                    background: #fff;
                    padding: 15px 15px 5px;
                    margin: 10px;
                    flex: 1;
                    overflow-y: auto;
                    &::-webkit-scrollbar {
                        width: 0;
                        height: 0;
                    }
                    .rules-type-item {
                        .rules-title {
                            font-size: 14px;
                            font-family: PingFangSC-Medium, PingFang SC;
                            font-weight: 500;
                            color: #333333;
                            line-height: 24px;
                            margin-bottom: 4px;
                        }
                        .rules-content {
                            font-size: 14px;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #666666;
                            line-height: 24px;
                            margin-bottom: 10px;
                        }
                        .rules-image {
                            img {
                                width: 100%;
                                object-fit: cover;
                                border-radius: 8px;
                                margin-bottom: 10px;
                            }
                        }
                    }
                }
            }

        }
    }

}
</style>
